<template>
<div class="loading-box" v-if="loadShow">
      <div class="no-more" v-show="noMoreShow">
        <div class="no-more-left"></div>
        <div class="no-more-tips">{{this.noMoreText}}</div>
        <div class="no-more-right"></div>
      </div>
      <div class="load" v-loading="loading">
      </div>
    </div>
</template>

<script>
export default {
  props: {
    // 显示组件
    loadShow: {
      type: Boolean,
      default: false
    },
    // 组件提示文字
    noMoreText: {
      type: String,
      default: null
    },
    // 显示提示文字
    noMoreShow: {
      type: Boolean,
      default: false
    },
    // 显示加载
    loading: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.loading-box{
    width: 100%;
    height: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .no-more{
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      flex: 1;
      .no-more-left{
        width: 33%;
        border-bottom: 1px solid #e5e5e5;
        box-sizing: border-box;
        align-self: center;
      }
      .no-more-tips{
        width: 210px;
        font-size: 12px;
        color: #999;
        text-align: center;
        line-height: 80px;
      }
      .no-more-right{
        width: 33%;
         border-bottom: 1px solid #e5e5e5;
         align-self: center;
         box-sizing: border-box;
      }
    }
    .load{
        width: 100%;
        height: 50px;

    }
  }

  @media screen and (max-width:540px) {
    .loading-box{
    width: 100%;
    height: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .no-more{
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      flex: 1;
      .no-more-left{
        width: 33%;
        border-bottom: 1px solid #e5e5e5;
        box-sizing: border-box;
        align-self: center;
      }
      .no-more-tips{
        width: 270px;
        font-size: 12px;
        color: #999;
        text-align: center;
        line-height: 80px;
      }
      .no-more-right{
        width: 33%;
         border-bottom: 1px solid #e5e5e5;
         align-self: center;
         box-sizing: border-box;
      }
    }
    .load{
        width: 100%;
        height: 50px;

    }
  }
  }
</style>
